<template>
	<view class="spread flex justify-center items-center" :class="{'box-spread': showFlag}">
		<view class="flex justify-center items-center" style="gap: 60rpx;">
			<view class="spread-item flex flex-col items-center">
				<template v-if="isAch == 1">
					<image :src="cardList[1].tarot.front" mode="widthFix" v-if="cardList[1].dir == 0"></image>
					<image :src="cardList[1].tarot.back" mode="widthFix" v-else></image>
				</template>
				<template v-else>
					<image src="@/static/tarot-bg.png" mode="widthFix"></image>
					<text class="spread-name flex flex-col" style="gap: 10rpx;">
						<text>2</text>
						<text>过去</text>
					</text>
				</template>
			</view>
			<view class="flex flex-col" style="gap: 20rpx;">
				<view class="spread-item flex flex-col items-center">
					<template v-if="isAch == 1">
						<image :src="cardList[3].tarot.front" mode="widthFix" v-if="cardList[3].dir == 0"></image>
						<image :src="cardList[3].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>冠军</text>
							<text>果</text>
						</text>
					</template>
				</view>
				<view class="spread-item flex flex-col items-center rotate-card">
					<view class="rect">
						<view class="arrow-edge-box"></view>
					</view>
					<template v-if="isAch == 1">
						<image :src="cardList[0].tarot.front" mode="widthFix" v-if="cardList[0].dir == 0"
							style="position: relative;z-index: 2;"></image>
						<image :src="cardList[0].tarot.back" mode="widthFix" v-else style="position: relative;z-index: 2;"></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix" style="position: relative;z-index: 2;"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>切</text>
							<text>现状</text>
						</text>
					</template>
				</view>
				<view class="spread-item flex flex-col items-center">
					<template v-if="isAch == 1">
						<image :src="cardList[4].tarot.front" mode="widthFix" v-if="cardList[4].dir == 0"></image>
						<image :src="cardList[4].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>座</text>
							<text>因</text>
						</text>
					</template>
				</view>
			</view>
			<view class="spread-item flex flex-col items-center">
				<template v-if="isAch == 1">
					<image :src="cardList[2].tarot.front" mode="widthFix" v-if="cardList[2].dir == 0"></image>
					<image :src="cardList[2].tarot.back" mode="widthFix" v-else></image>
				</template>
				<template v-else>
					<image src="@/static/tarot-bg.png" mode="widthFix"></image>
					<text class="spread-name flex flex-col" style="gap: 10rpx;">
						<text>3</text>
						<text>未来</text>
					</text>
				</template>
			</view>
			<view class="flex flex-col last-col">
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 7 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[8].tarot.front" mode="widthFix" v-if="cardList[8].dir == 0"></image>
						<image :src="cardList[8].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">结局</text>
					</template>
				</view>
				<view class="spread-item flex flex-col items-center" style="--move: -66rpx;">
					<text class="spread-up"> 6 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[7].tarot.front" mode="widthFix" v-if="cardList[7].dir == 0"></image>
						<image :src="cardList[7].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>内心</text>
							<text>恐惧</text>
						</text>
					</template>
				</view>
				<view class="spread-item flex flex-col items-center" style="--move: -133rpx;">
					<text class="spread-up"> 5 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[6].tarot.front" mode="widthFix" v-if="cardList[6].dir == 0"></image>
						<image :src="cardList[6].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>环境</text>
							<text>影响</text>
						</text>
					</template>
				</view>
				<view class="spread-item flex flex-col items-center" style="--move: -200rpx;">
					<text class="spread-up"> 4 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[5].tarot.front" mode="widthFix" v-if="cardList[5].dir == 0"></image>
						<image :src="cardList[5].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name flex flex-col" style="gap: 10rpx;">
							<text>自身</text>
							<text>现状</text>
						</text>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		nextTick,
	} from 'vue';
	const cardList = inject('cardList')
	const showFlag = inject('showFlag')
	const isAch = ref(0)
	isAch.value = uni.getStorageSync('user').ach
</script>

<style>
	@import "./spread.css";

	.spread {
		height: 580rpx;
	}

	.spread>view {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, calc(-50% + 16rpx));
	}

	.spread-item {
		position: relative;
	}

	.spread-name {
		z-index: 3;
	}

	.last-col {
		padding-left: 20rpx;
		padding-right: 24rpx;
		transform: translateY(10%);
	}

	.last-col .spread-name {
		padding-top: 50rpx;
	}

	.rotate-card {
		transform: rotate(-90deg);
	}

	.rect {
		z-index: 2;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 1px dashed #333;
		transform: rotate(90deg);
	}

	.arrow-edge-box {
		position: absolute;
		top: 0;
		left: calc(100% + 20rpx);
		width: 80rpx;
		transform-origin: -20rpx 0;
		transform: rotate(-45deg);
		border-top: 1px solid #333;
	}

	.arrow-edge-box::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(calc(-50% - 1px)) rotate(-45deg);
		width: 12rpx;
		height: 12rpx;
		border-top: 1px solid #333;
		border-left: 1px solid #333;
	}

	.arrow-edge-box::after {
		content: '建议';
		white-space: nowrap;
		position: absolute;
		top: 0;
		left: 100%;
		transform-origin: left center;
		transform: translateY(calc(-50% - 1px)) rotate(45deg);
		font-size: 24rpx;
	}

	.last-col .spread-item {
		transform: translateY(var(--move, 0)) rotate(45deg);
	}
</style>